<template>
	<view class="release_container">
		<!-- 标签切换栏 -->
		<view class="">
			<u-tabs :active="currIndex" :list="tabList" lineColor="#459BF8" lineWidth="60rpx" lineHeight="8rpx"
				@change="change" :scrollable="false" :activeStyle="{color:'#459BF8',fontSize: '30rpx'}"
				:inactiveStyle="{color:'#333',fontSize: '30rpx'}"></u-tabs>
		</view>
		<!-- 内容部分 -->
		<navigator url="/pages/service/details" class="">
			<view class="index_content">
				<view class="mt10 index_text f30 f700 mlr10">
					<text>闲置物</text>需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明需求说明
				</view>
				<view class="flex flex-between align-center mt25 mlr10">
					<view class="f25">
						1111
					</view>
					<view class="f25">
						2024.3.10
					</view>
				</view>
			</view>
			<view class="flex">
				<view class="flex align-center ml60">
					<u-icon name="eye-fill" size="50"></u-icon>
					<view class="f30 ml20">
						33
					</view>
				</view>
				<view class="flex align-center ml70">
					<u-icon name="star-fill" size="50"></u-icon>
					<view class="f30 ml20">
						21
					</view>
				</view>
				<view class="flex align-center ml70">
					<u-icon name="chat-fill" size="50"></u-icon>
					<view class="f30 ml20">
						8
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
				}, {
					name: '闲置物',
				}, {
					name: '社区服务'
				}, {
					name: '专业技能'
				}],
				currIndex: 0,
			}
		},
		methods: {
			change(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.release_container {

		//内容栏
		.index_content {
			width: 90%;
			height: 200rpx;
			margin: 20rpx auto;
			border: 2rpx solid #333;
			border-radius: 10rpx;

			.index_text {
				text {
					border-radius: 60rpx;
					background: #F7D0CF;
					font-size: 20rpx;
					margin-right: 15rpx;
					padding: 10rpx 15rpx;
				}

				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				line-height: 1.8;
			}
		}
	}
</style>